import Vue from "vue"
import VueRouter from "vue-router"

// 0. 导入Vue和VueRouter
Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
import Foo from "../pages/Foo.vue"
import Bar from "../pages/Bar"
import BMI from "../pages/BMI"
import About from "../pages/About"
import Home from "../pages/Home"
import User from "../pages/User"
import UserPosts from "../pages/UserPosts"
import NotFound from "../pages/NotFound"
import SingerDetail from "../pages/SingerDetail"

/*// 2. 定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]*/

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes: [
    {
      path: "/home",
      // redirect: "/"
      redirect: {
        name: "Home"
      }
    },
    {
      path: '/',
      component: Home,
      name: "Home"
    },
    {
      path: "/music",
      name: "Music",
      component: () => {
        return import("../pages/Music")
      }
    },
    {
      // /user/*
      path: "/user/:id",
      name: "User",
      component: User
    },
    {
      // /user/*/posts/
      // /user/7/posts/zzz
      path: "/user/:username/posts/:post_id",
      name: "UserPosts",
      component: UserPosts
    },
    {
      // /SingerDetail/*
      path: "/singer_detail/:id",
      name: "SingerDetail",
      component: SingerDetail
    },
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '/bmi', component: BMI },
    {
      path: '/about112345678',
      alias: '/about',
      name: "About",
      component: About
    },
    { path: '*', component: NotFound },
  ],
  mode: 'history'
})

export default router
/*
* {
*   path: "path",
*   component: xxx.vue
* }
* */
// 将组件 (components) 映射到路由 (routes)


